<!--
 - @author dawu
 - @example <select-sort :no="[1,2]" @event="bindSelectSort(index)"></select-sort>
 - @param {Array} no [数组默认四个选项全部显示，可在no中传入不需要显示的下标数组]
 - @param {Function} event [bindSelectSort组件回调函数，返回index为当前选项下标]
 -->
<template>
  <el-select v-model="value" @change="bindChange">
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :label="item"
      :value="index">
    </el-option>
  </el-select>
</template>
<script>
export default {
  data () {
    return {
      options: [
        '录取概率从低到高',
        '录取概率从高到低',
        '校友网排名从高到低',
        '金苹果网排名从高到低'
      ],
      value: 0
    }
  },
  props: {
    no: {
      type: Array,
      default () {
        return []
      }
    },
    active: {
      type: Number,
      default () {
        return 0
      }
    }
  },
  created () {
    this.filter()
    if (this.active) this.value = this.active * 1
  },
  methods: {
    bindChange () {
      this.$emit('event', this.value)
    },
    filter () {
      let _arr = []
      this.options.forEach((item, index) => {
        if (this.inArray(index)) {
          _arr.push(item)
        }
      })
      this.options = _arr
    },
    inArray (index) {
      let r = new RegExp(','+index+',')
      return !(r.test(','+this.no.join()+','))
    }
  }
}
</script>

<style scoped lang="scss">
  /deep/ {
    .el-input__inner{
      border:none;
      border-radius:100px;
      color:#69707F;
      background:#F7F7FB;
      padding-left:20px;
      padding-right:35px;
    }
    .el-input__suffix{
      right:10px;
    }
    .el-select__caret{
      color:#69707F
    }
  }
  .el-select-dropdown__item.selected{
    color:$positive;
  }
</style>
